import React, { createContext, useContext, useEffect, useState } from 'react';

// 创建 Redux 上下文对象
const ReduxContext = createContext();

// 提供 Redux store 的容器组件
export const Provider = ({ store, children }) => {
  return <ReduxContext.Provider value={store}><App /></ReduxContext.Provider>;
};

// 自定义 Hook，用于选择和访问 store 中的状态
export const useSelector = (selector) => {
  //获得 store 对象
  const store = useContext(ReduxContext); // 获取当前的 Redux store
  //声明一个状态
  const [state, setState] = useState(selector(store.getState())); // 组件的局部状态

  useEffect(() => {
    const unsubscribe = store.subscribe(() => {
      const newState = selector(store.getState()); // 通过选择器函数获取新的状态
      setState(newState); // 更新组件的局部状态
    });

    return unsubscribe; // 组件卸载时取消订阅
  }, [store, selector]);

  return state; // 返回组件的局部状态
};

// 自定义 Hook，用于获取 store 的 dispatch 方法
export const useDispatch = () => {
  const store = useContext(ReduxContext); // 获取当前的 Redux store
  return store.dispatch; // 返回 dispatch 方法
};